<template>
  <div :style="{ backgroundColor: 'rgba(128,128,128,0.09)', width: '100vw',minHeight:'calc(100vh - 50px)' }">
  <el-card style="width: 100vw;position: absolute;top: 0;background-color: #da3a3a;height: 180px"></el-card>
  <div style="display: flex; align-items: center; justify-content: flex-end; padding: 10px;margin-top: 10px">
    <el-input v-model="name" placeholder="请输入商品名称" style="margin-top: 0px;"   @keyup.enter.native="handleEnter"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    <div style="display: flex; align-items: center; margin-left: 10px; line-height: 40px; height: 40px;">
      <i class="el-icon-bell" style="color: white;font-size: 25px;z-index: 2"></i>
    </div>
  </div>
  <div style="padding: 10px">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="border-radius: 10px;height: 157px">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" style="object-fit: cover; width: 100%; height: 100%;" />
      </van-swipe-item>
    </van-swipe> </div>
  <img v-lazy="image2" style="object-fit: cover; width: 100%; " />
  <div style="padding-left: 10px;padding-right: 10px; width: 100vw; display: flex; justify-content: space-between;">
 <span class="color-change" style="font-size: 17px; width: 20vw;line-height:40px;text-align: center" v-for="items in categorys" :key="items.id" @click="chooseCat(items.id)">
  {{items.name}}
</span>
  </div>
  <div style="padding-right: 10px;padding-left: 10px">
    <div class="card-container" >
      <el-card shadow="never" v-for="(items,index) in products" :key="items.id" style="width: 49%;margin-top: 5px;min-height: 270px;background-color: white;z-index: 20" >
        <!-- 卡片内容 -->
        <el-image class="square-image" @click="goToDetail(items)"
          :style="{width: '100%',height: '49vw'}"
          :src="items.img"
          fit="cover"></el-image>
        <div class="two-lines" :style="{width:e2 ,wordBreak: 'break-all',marginTop:'5px',height:'42px'}">
          {{items.itemDescription}}
        </div>
        <div style="display: flex;justify-content: space-between;padding: 10px;">
          <div style="color: red">￥{{items.price}}</div>
<!--          <div style="font-size: 14px;color: #999">200人已购买</div>-->
        </div>
      </el-card>
    </div>
    <div style="margin-bottom: 50px"></div>
  </div>

</div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
import request from "../../utils/request";
import {useRoute} from "vue-router/composables";

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Search);
export default {
  data(){
    return{
      e2:null,
      products:[],
      categorys:[],
      image2:'/static/u6234.png',
      images:["/static/u6208.png","/static/u6207.png","/static/u6206.png"],
      name:null,
      winHeight:null,
    }
  },
  watch: {
    categorys: {
      handler(newVal) {
        if (newVal.length === 0) {
          this.getCatgories();
        }
      },
      immediate: true, // 立即执行一次
    },
  },
  created() {
    this.getCatgories()
  },
  mounted() {

  },
  computed: {

  },
  methods:{
    //回车全局搜索
    handleEnter(){
      this.$router.push({path:'/approduct',query:{name:this.name}})
    },
    //跳转详情页
    goToDetail(items){
      this.$router.push({path:'/productDetail',query:{i:items.id,itemId:items.itemId,price:items.price,type:0}})
    },
    //查询分类添加空串
    categorysComputed(){
      while (this.categorys.length < 5) {
        this.categorys.push(''); // 添加空串
      }
    },
    //查询分类下的商品
    chooseCat(i){
      request.post('/productDetails/chooseCat',{id:i}).then(resp=>{
        if (resp.code===0){
          this.products=resp.data
        }else {
          this.Toast(resp.errorMessage,'error')
        }
      })
    },
    //查询分类
    getCatgories(){
      request.get('/productCategories/getCatgories').then(resp=>{
        if (resp.code===0){
          this.categorys=resp.data
          this.categorysComputed()
          this.chooseCat(this.categorys[0].id)
        }else {
          this.Toast(resp.errorMessage,'error')
        }
      })
    },
  }
}
</script>

<style scoped>
.two-lines {
  margin-left: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
>>> .el-card__body{
  padding: 0;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.color-change {
  color: #000; /* 默认字体颜色 */
}
.color-change:hover {
  color: #da3a3a; /* 鼠标悬停时的字体颜色 */
  font-weight: bold;
  border-bottom: 3px solid #da3a3a;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
}
>>> .el-input__inner{
  border-radius: 20px;
}
>>> .el-card{
  z-index: -1;
}
</style>
